<template>
	<view class="container">
		<!-- 商家列表 -->
		<view v-if="businessList.length" class="business-list">
			<view class="box" v-for="item in businessList" :key="item.id" @click="goToDeatil(item.id)">
				<view class="business-item">
					<image :src="item.avatar" class="business-avatar"></image>
					<view class="business-info">
						<view class="business-name">{{ item.name }}</view>
						<view class="business-details">
							<view class="rating-sales">
								<text class="rating">{{ item.score }}分</text>
								<text class="sales">已售{{ item.nums }}</text>
							</view>
							<text class="delivery-time">30分钟内送达</text>
							<view class="business-intro">{{ item.info || '商家介绍' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示信息 -->
		<view v-else class="no-business-message">
			没有找到符合条件的商家。
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			businessList: []
		}
	},
	onLoad(option) {
		this.type = option.type
		this.load()
	},
	methods: {
		goToDeatil(businessId) {
			uni.navigateTo({
				url: '/pages/detail/detail?businessId=' + businessId
			})
		},
		load() {
			this.$request.get('/business/selectAll', { type: this.type, status: '通过' }).then(res => {
				this.businessList = res.data || []
			}).catch(err => {
				console.error('Error loading businesses:', err)
				uni.showToast({ title: '加载商家失败', icon: 'none' })
			})
		}
	}
}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.business-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.box {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
		background-color: #fff;
		padding: 20rpx;
		cursor: pointer;
		transition: transform 0.2s ease-in-out;
	}

	.box:hover {
		transform: translateY(-5rpx);
	}

	.business-item {
		display: flex;
		align-items: center;
		grid-gap: 30rpx;
	}

	.business-avatar {
		width: 30%;
		height: 200rpx;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.business-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.business-name {
		font-size: 36rpx;
		font-weight: bold;
	}

	.business-details {
		color: #666;
	}

	.rating-sales {
		display: flex;
		align-items: center;
	}

	.rating {
		color: #ff9800;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.sales {
		color: #666;
	}

	.delivery-time {
		text-align: right;
		color: #666;
	}

	.free-delivery {
		color: #ff9800;
	}

	.business-intro {
		background-color: #ffd281;
		color: brown;
		border-radius: 4rpx;
		padding: 0 8rpx;
		width: fit-content;
	}

	.no-business-message {
		text-align: center;
		font-size: 32rpx;
		color: #ff0000;
		padding: 50rpx;
		border-radius: 10rpx;
		background-color: #f8f8f8;
		box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	}
</style>